<!--
 * @Author: your name
 * @Date: 2021-05-28 09:42:20
 * @LastEditTime: 2021-08-20 17:46:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-template\src\views\Login.vue
-->
<template>
    <div class="home">
    
        <ul>
    
            <li class="title">{{title}}</li>
    
            <li class="loginmain">
    
                <van-form @submit="onSubmit">
    
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
    
                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
    
                    <div style="margin: 16px;">
    
                        <van-button block type="primary" native-type="submit">登录</van-button>
    
                    </div>
    
                </van-form>
    
            </li>
    
        </ul>
    
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive,toRefs} from "vue";
import { login } from '@/api/login'
import localstorage from '@/utils/localstorage'
import { Toast } from 'vant';
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
    name: "Home",
    components: {},
    setup(props) {
        const router = useRouter()
        let formUser = reactive({
            username: 'admin',
            password: 'admin'
        })
        onMounted(async () => {
            console.log("--------------init login--------------")
            // let loginStus = await login()

            // console.log("loginStus:", loginStus)
        })

        let saveUser = () => {

        }

        let onSubmit = async ()=>{
            console.log("login start", formUser.username)
            let loginStus = await login(formUser)
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
            });
            if((loginStus as any).code == 0){
                localstorage.set('loginUser', (loginStus as any).data)
                // const route = useRoute()
               
                // console.log("router--:", router)
                router.push('/')
            }
            console.log("loginS:", loginStus)
        }

        return {
            title: '浪潮',
            ...toRefs(formUser),
            onSubmit

        }
    }
});
</script>

<style lang="less" scoped>
.home {
    // color: @user-state-orange;
    .title {
        margin-top: 100px;
    }
    .loginmain {
        margin-top: 100px;
    }
}
</style>
>
